<template>
  <div className="container">
    <div className="cover">
      <swiper
        :autoplay="swiper_options.autoplay"
        :loop="swiper_options.loop"
        :speed="swiper_options.speed"
        :pagination="swiper_options.pagination"
      >
        <swiper-slide><img src="../../assets/test.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../../assets/test.png" alt="" /></swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
// 使用swiper的compositon API
import SwiperCore, { Autoplay, Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "../../../node_modules/swiper/swiper.min.css";
// import "swiper/components/pagination/pagination.scss";
SwiperCore.use([Autoplay, Pagination]);

// swiper相关配置属性放在swiper_options这个变量里
let swiper_options = reactive({
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  loop: true,
  speed: 1000,
  pagination: {
    clickable: true,
  },
});
</script>
<style scoped lang="scss">
// @import "../../../node_modules/swiper/swiper.min.css"
.container {
  width: 100%;
  height: 700px;
  background-image: url(../../assets/test.png);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  .cover {
    width: 100%;
    height: 700px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    .swiper {
      position: absolute;
      // top: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 1400px;
      height: 700px;
      .swiper-slide {
        img {
          width: 100%;
          height: 700px;
          opacity: 0.95;
        }
      }
    }
  }
}
@media only screen and (max-width: 1200px) {
  .container {
    margin-top: 190px;
  }
}
</style>
